<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GET</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <script>
        /*
          Ajax : 
              1. Asynchronous Javascript And XML（异步JavaScript和XML）, 。
              2. what : 一种创建交互式网页的开发技术。
              3. how : 刷新局部网页，而不是整个网页刷新的技术。
              4. 核心 : 使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。
              5. 好处 : 快速响应客户端。
          
          核心原理：
              传统的 web 开发，js 向服务器发起请求，等待服务器处理后，响应给浏览器。浏览器接收数据并渲染。  
                  此时，浏览器要等待服务器的响应后，才能发起新的请求。容易阻塞，用户体验不好。
              ajax 开发，浏览器内部有一个 ajax  引擎(XMLHTTPRequest)。 
                  js 向 ajax 引擎发送数据。
                  ajax 引擎向服务器发送请求。服务器处理完请求向 ajax 引擎响应数据。  
                  引擎通过事件监听函数，接收到响应的数据，并渲染。
                  js 可以不必等待 ajax 引擎的响应，多次向 ajax 引擎发起请求。
          
          使用步骤见： https://www.w3school.com.cn/xml/xml_http.asp
          */
    </script>

    <div id="dota">刀塔</div>

    <script type="text/javascript">
        console.log("-----------页面重新加载了--------------");

        var xmlhttp;
        var getUrl =
            "http://localhost:8080/api/get?name=剑圣&game =刀塔2&position=carry";

        // 发起请求
        sendAjax();
        function sendAjax() {
            xmlhttp = null;
            // 1. 创建 XMLHttpRequest 对象
            if (window.XMLHttpRequest) {
                // code for all new browsers
                xmlhttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                // 浏览器兼容 code for IE5 and IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp != null) {
                // 2. 设置回调函数，处理服务器的响应
                xmlhttp.onreadystatechange = callback;

                // 3. 设置请求方式，url ，异步与否
                xmlhttp.open("GET", getUrl, true);

                // 4. 向服务器发送请求
                xmlhttp.send(null);
            } else {
                alert("Your browser does not support XMLHTTP.");
            }
        }

        // 回调函数
        function callback() {
            // 测试状态码
            // console.log(xmlhttp.readyState);

            if (xmlhttp.readyState == 4) {
                // 4 = "loaded"
                if (xmlhttp.status == 200) {
                    // 200 = OK
                    // 5. 接收数据并渲染
                    console.log(xmlhttp.responseText);
                } else {
                    alert("Problem retrieving XML data");
                }
            }
        }
    </script>
</body>

</html>